<script setup>
import { ref, reactive, computed } from "vue";

const count = ref(0);
const message = ref("");
const showTutorial = ref(false);
const isAnimating = ref(false);
const achievements = reactive({
  beginner: { unlocked: false, name: "初学者", requirement: 1 },
  apprentice: { unlocked: false, name: "学徒", requirement: 5 },
  expert: { unlocked: false, name: "专家", requirement: 10 },
  master: { unlocked: false, name: "粽子大师", requirement: 20 },
});

const currentLevel = computed(() => {
  if (count.value >= 20) return "粽子大师";
  if (count.value >= 10) return "专家";
  if (count.value >= 5) return "学徒";
  if (count.value >= 1) return "初学者";
  return "新手";
});

const progress = computed(() => {
  if (count.value >= 20) return 100;
  if (count.value >= 10) return 75 + (count.value - 10) * 2.5;
  if (count.value >= 5) return 50 + (count.value - 5) * 5;
  if (count.value >= 1) return 25 + (count.value - 1) * 6.25;
  return 0;
});

function makeZongzi() {
  if (isAnimating.value) return;

  isAnimating.value = true;
  setTimeout(() => {
    isAnimating.value = false;
    count.value++;
    checkAchievements();
  }, 500);
}

function checkAchievements() {
  const newAchievement = ref(false);

  if (
    count.value >= achievements.beginner.requirement &&
    !achievements.beginner.unlocked
  ) {
    achievements.beginner.unlocked = true;
    newAchievement.value = true;
  }

  if (
    count.value >= achievements.apprentice.requirement &&
    !achievements.apprentice.unlocked
  ) {
    achievements.apprentice.unlocked = true;
    newAchievement.value = true;
  }

  if (
    count.value >= achievements.expert.requirement &&
    !achievements.expert.unlocked
  ) {
    achievements.expert.unlocked = true;
    newAchievement.value = true;
  }

  if (
    count.value >= achievements.master.requirement &&
    !achievements.master.unlocked
  ) {
    achievements.master.unlocked = true;
    newAchievement.value = true;
  }

  if (newAchievement.value) {
    message.value = `恭喜！你已达到"${currentLevel.value}"级别！`;
  } else {
    if (count.value === 1) {
      message.value = "你包了第一个粽子！继续加油！";
    } else {
      message.value = `你已经包了${count.value}个粽子！`;
    }
  }
}

function toggleTutorial() {
  showTutorial.value = !showTutorial.value;
}

function resetProgress() {
  if (confirm("确定要重置进度吗？")) {
    count.value = 0;
    message.value = "";
    Object.keys(achievements).forEach((key) => {
      achievements[key].unlocked = false;
    });
  }
}
</script>

<template>
  <div class="zongzi-maker">
    <h2>端午包粽子</h2>

    <div class="level-indicator">
      <div class="level-title">
        当前级别: <span>{{ currentLevel }}</span>
      </div>
      <div class="progress-bar">
        <div class="progress-fill" :style="{ width: `${progress}%` }"></div>
      </div>
    </div>

    <div class="zongzi-display">
      <div
        :class="['zongzi-image', { animating: isAnimating }]"
        @click="makeZongzi"
      ></div>
      <div class="zongzi-count">{{ count }}</div>
    </div>

    <p class="message" v-if="message">{{ message }}</p>

    <div class="instructions">
      <p>点击粽子开始包！</p>
      <div class="ingredients">
        <div class="ingredient rice">糯米</div>
        <div class="ingredient meat">肉馅</div>
        <div class="ingredient egg">蛋黄</div>
        <div class="ingredient leaf">粽叶</div>
      </div>
    </div>

    <div class="achievements">
      <h3>成就</h3>
      <div class="achievement-list">
        <div
          v-for="(achievement, key) in achievements"
          :key="key"
          :class="['achievement-item', { unlocked: achievement.unlocked }]"
        >
          <div class="achievement-icon">
            {{ achievement.unlocked ? "🏆" : "🔒" }}
          </div>
          <div class="achievement-info">
            <div class="achievement-name">{{ achievement.name }}</div>
            <div class="achievement-requirement">
              包 {{ achievement.requirement }} 个粽子
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="action-buttons">
      <button class="tutorial-btn" @click="toggleTutorial">
        {{ showTutorial ? "关闭教程" : "查看教程" }}
      </button>
      <button class="reset-btn" @click="resetProgress">重置进度</button>
    </div>

    <div v-if="showTutorial" class="tutorial">
      <h3>如何包粽子</h3>
      <div class="tutorial-steps">
        <div class="tutorial-step">
          <div class="step-number">1</div>
          <div class="step-content">准备粽叶，洗净后浸泡在水中</div>
        </div>
        <div class="tutorial-step">
          <div class="step-number">2</div>
          <div class="step-content">将粽叶折成漏斗状</div>
        </div>
        <div class="tutorial-step">
          <div class="step-number">3</div>
          <div class="step-content">放入糯米和馅料</div>
        </div>
        <div class="tutorial-step">
          <div class="step-number">4</div>
          <div class="step-content">折叠粽叶并用绳子扎紧</div>
        </div>
        <div class="tutorial-step">
          <div class="step-number">5</div>
          <div class="step-content">放入锅中煮熟即可</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.zongzi-maker {
  background-color: #fff9e6;
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h2 {
  color: #8bc34a;
  margin-top: 0;
  font-size: 1.8rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.level-indicator {
  margin: 20px 0;
}

.level-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.level-title span {
  color: #ff5252;
}

.progress-bar {
  height: 10px;
  background-color: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8bc34a, #4caf50);
  transition: width 0.5s ease;
}

.zongzi-display {
  position: relative;
  margin: 20px auto;
  width: 150px;
  height: 200px;
}

.zongzi-image {
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill='%238bc34a' d='M50,10 L90,40 L90,80 L50,110 L10,80 L10,40 Z'/%3E%3Cpath fill='%23689f38' d='M50,10 L90,40 L50,70 L10,40 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.zongzi-image:hover {
  transform: scale(1.05);
}

.zongzi-image.animating {
  animation: makeZongzi 0.5s ease;
}

@keyframes makeZongzi {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8) rotate(-10deg);
  }
  100% {
    transform: scale(1);
  }
}

.zongzi-count {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #ff5252;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.message {
  font-size: 1.2rem;
  color: #ff5252;
  font-weight: bold;
  height: 30px;
  margin: 15px 0;
  animation: messagePopup 0.5s ease;
}

@keyframes messagePopup {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.instructions {
  margin-top: 20px;
}

.ingredients {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.ingredient {
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.ingredient:hover {
  transform: translateY(-3px);
}

.rice {
  background-color: #f5f5f5;
  color: #757575;
}

.meat {
  background-color: #ffccbc;
  color: #e64a19;
}

.egg {
  background-color: #fff59d;
  color: #fbc02d;
}

.leaf {
  background-color: #c8e6c9;
  color: #388e3c;
}

.achievements {
  margin-top: 30px;
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 10px;
}

.achievements h3 {
  margin-top: 0;
  color: #333;
}

.achievement-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

.achievement-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.achievement-item.unlocked {
  opacity: 1;
  background-color: #f0f9e8;
  border-left: 3px solid #8bc34a;
}

.achievement-icon {
  font-size: 1.5rem;
  margin-right: 15px;
}

.achievement-info {
  text-align: left;
}

.achievement-name {
  font-weight: bold;
}

.achievement-requirement {
  font-size: 0.9rem;
  color: #666;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.tutorial-btn,
.reset-btn {
  padding: 8px 15px;
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tutorial-btn {
  background-color: #4caf50;
  color: white;
}

.tutorial-btn:hover {
  background-color: #388e3c;
}

.reset-btn {
  background-color: #f44336;
  color: white;
}

.reset-btn:hover {
  background-color: #d32f2f;
}

.tutorial {
  margin-top: 20px;
  background-color: #e8f5e9;
  padding: 15px;
  border-radius: 10px;
  animation: slideDown 0.5s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tutorial h3 {
  margin-top: 0;
  color: #2e7d32;
}

.tutorial-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

.tutorial-step {
  display: flex;
  align-items: center;
  text-align: left;
}

.step-number {
  width: 25px;
  height: 25px;
  background-color: #4caf50;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-weight: bold;
}

.step-content {
  flex: 1;
}
</style>